<template>
  <ul>
    <li :style="{ opacity }">欢迎学习Vue</li>
    <li
      v-for="n in news"
      :key="n.id"
    >
      {{ n.title }}
    </li>
  </ul>
</template>

<script>
  export default {
    name: "News",
    data() {
      return {
        a: false,
        opacity: 1,
        news: [
          { id: "002", title: "新闻002" },
          { id: "001", title: "新闻001" },
          { id: "003", title: "新闻003" },
        ],
      }
    },
    // 路由组件专属
    activated() {
      this.timer = setInterval(() => {
        this.opacity -= 0.01
        if (this.opacity <= 0) this.opacity = 1
      }, 16)
    },
    deactivated() {
      console.log("news被销毁了")
      clearInterval(this.timer)
    },

    // mounted() {
    //   this.timer = setInterval(() => {
    //     this.opacity -= 0.01
    //     if (this.opacity <= 0) this.opacity = 1
    //   }, 16)
    // },
    // beforeDestroy() {
    //   console.log("news被销毁了")
    //   clearInterval(this.timer)
    // },
  }
</script>
